<template>
  <div class="page">
    <el-row :gutter="20">
      <div class="page">
        <div class="selectData">
          <span style="margin-right:10px;">季度:</span>
          <el-select
            size="small"
            class="userIntSize"
            v-model="quarter"
            clearable
            placeholder="请选择季度"
            @change="changequarterId"
          >
            <el-option
              v-for="item in quarterArray"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <span style="margin-right:10px;">类型:</span>
          <el-select
            size="small"
            class="userIntSize"
            v-model="taskId"
            clearable
            placeholder="请选择"
            @change="getTaskId"
          >
            <el-option
              v-for="item in quarterList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="tableStyle">
          <div id="Tablevalue"></div>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      quarterArray: [
        {
          id: 1,
          name: "第一季度",
        },
        {
          id: 2,
          name: "第二季度",
        },
        {
          id: 3,
          name: "第三季度",
        },
        {
          id: 4,
          name: "第四季度",
        },
      ],
      quarter: 1,
      quarterList: [
        { id: 1, name: "完成率分数" },
        { id: 2, name: "工作台账分数" },
        { id: 3, name: "负面清单分数" },
        { id: 4, name: "加分项分数" },
        { id: 5, name: "减分项分数" },
      ],
      options: [
        {
          value: "1",
          label: "上半年",
        },
        {
          value: "2",
          label: "下半年",
        },
      ],
      taskId: 1,
    };
  },
  mounted() {
    // this.getTaskList();
    this.dataTable()
  },
  methods: {
    dataTable(val) {
      let echartsX = [];
      let echartsY = [];
      this.$axios
        .post("/Ledger/DataAnalysisTask", {
          quarter: this.quarter,
          ledgerType: this.taskId,
        })
        .then((res) => {
          if (res.code == 200) {
            res.data.forEach((item) => {
              echartsX.push(item.title);
              echartsY.push({
                value: item.num,
                data: item.num,
                rank: item.rank,
              });
            });
          }
          var Tablevalue = this.$echarts.init(
            document.getElementById("Tablevalue")
          );
          Tablevalue.setOption({
            // color: ["#0099FF"],
            title: {
              text: "",
              left: "center",
            },
            tooltip: {
              trigger: "axis",
              position: function (pt) {
                return [pt[0], "10%"];
              },
              formatter(params) {
                const item = params[0];
                return `
                分数：${item.data.data}
              `;
              },
            },
            grid: {
              left: "10%",
              bottom: "30%",
            },
            xAxis: {
              type: "category",
              data: echartsX,
              axisLabel: {
                // formatter: function (value) {
                //   return value.split("").join("\n");
                // },
                interval: 0,
                rotate: 60,
              },
            },
            yAxis: {
              type: "value",
              minInterval: 1,
              boundaryGap: [0, 0.1],
              // min: function (value) {
              //   return 1;
              // },
              // max: function (value) {
              //   return 15;
              // },
              // axisLabel: {
              //   formatter: function () {
              //     return "";
              //   },
              // },
            },
            series: [
              {
                data: echartsY,
                type: "bar",
                // showBackground: true,
                barWidth: 30,
                backgroundStyle: {
                  color: "rgba(220, 220, 220, 0.8)",
                },
                itemStyle: {
                  normal: {
                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function (params) {
                      var colorList = [
                        "#c52b6a",
                        "#ec4290",
                        "#ea3acf",
                        "#d539f7",
                        "#a82ada",
                        "#8114c0",
                        "#d8bd26",
                        "#b8ca23",
                        "#76a905",
                        "#80c13d",
                        "#4da758",
                        "#4aa4a5",
                        "#2a65b1",
                      ];
                      return colorList[params.dataIndex];
                    },
                  },
                  //鼠标悬停时：
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // getTaskList() {
    //   this.$axios
    //     .post("/task/getList")
    //     .then((res) => {
    //       res.data.map((item) => {
    //         if (item.children.length == 0) {
    //           item.children = undefined;
    //         }
    //         this.taskLists = res.data;
    //       });
    //       this.taskId = res.data[0].id;
    //       this.dataTable();
    //     })
    //     .catch((err) => {});
    // },
    getTaskId(val) {
      this.taskId = val
      this.dataTable();
    },
    changequarterId(val) {
      this.quarter = val
      this.dataTable();
    },
  },
};
</script>
<style lang="less" scoped>
.tableStyle {
  width: 100%;
  height: auto;
  // padding-top: 40px;
  > div {
    width: 100%;
    height: 500px;
    margin-bottom: 20px;
  }
}
.userIntSize {
  width: 20% !important;
}
.el-card {
  margin-bottom: 20px;
}
.selectData {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
